<template>
  <view class="container">
    <!-- 表单内容 -->
    <form @submit="formSubmit" class="formList">
      <!-- 其他表单项 -->
      <view class="form-item time">
        <text>完成时间</text>
        <view class="example-body">
         			<uni-datetime-picker type="datetime" v-model="formData.time" />
         </view>
      </view>
      <view class="form-item useTime">
        <text>实际用时</text>
        <input  placeholder="请输入用时" v-model="formData.usetime" />
      </view>
      <view class="form-item remark">
        <text>备注</text>
        <input  placeholder="请输入备注" v-model="formData.remark" />
      </view>
      <!-- 图片上传部分 -->
      <view class="form-item picture">
        <view class="tit">
          照片
        </view>
        <view class="uploader-list">
          <block v-for="(item, index) in fileList" :key="index">
            <view class="img">
              <image class="upload-img" :src="item" mode="aspectFill" />
              <view class="delete-icon" @click="deleteImg(index)">x</view>
            </view>
          </block>
          <view class="uploader-item" v-if="fileList.length < maxCount" @click="chooseImage">
            <text class="uploader-plus-icon"></text>
            <text>点击上传</text>
          </view>
        </view>
      </view>
      <!-- 提交按钮 -->
      <button form-type="submit">提交</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: { // 表单数据对象
      mid:''
      },
      fileList: [], // 已上传的图片列表
      maxCount: 1 // 最大上传图片数量
    };
  },
  methods: {
    // 选择图片的方法
    chooseImage() {
      uni.chooseImage({
        count: this.maxCount - this.fileList.length, // 默认9，我们这里最多选择3张
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认都有
        success: (res) => {
          // 将选择的图片添加到fileList中
          this.fileList = this.fileList.concat(res.tempFilePaths);
        }
      });
    },
    // 删除图片的方法
    deleteImg(index) {
      this.fileList.splice(index, 1); // 删除fileList中指定的图片
    },
    // 提交表单的方法
    formSubmit(e) {
      // 这里应处理表单提交事件，包括图片和表单内容的上传
      console.log('表单数据：', this.formData);
      console.log('已上传图片列表：', this.fileList);
      // 上传图片到服务端的逻辑在这里实现
      // for (let i = 0; i < this.fileList.length; i++) {
      //   this.uploadFile(this.fileList[i]);
      // }
      
      try {
          this.uploadFile(this.fileList);
          uni.showToast({
            title: '提交成功',
            icon: 'success',
            duration: 2000
          });
           setTimeout(() => {
                uni.navigateBack({
                 delta: 1,
                });
              }, 2000);
        } catch (error) {
          // 处理请求失败的情况
          console.error(error);
        }
      // 在这里添加必要的表单验证
      // 如果一切检验通过，则发送数据到服务器
    },
    // 上传文件的方法
    uploadFile(filePath) {
      console.log(filePath,'上传打印');
      // const self = this;
      // const imgPath = self.filePath[index];
      uni.uploadFile({
        url: '/achieve/add', // 你的上传文件的API接口
        filePath: filePath[0],
        name: 'pictures', // 必须填写，为后台接收文件字段,
        header:{
            	'content-type': 'multipart/form-data',
        },
         formData:{
         mid:this.formData.mid,
         useTime:this.formData.usetime,
         time:this.formData.time,
         remark:this.formData.remark
     },
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data);
          // 根据后台的返回数据来做适当的处理
        },
        fail: (err) => {
          console.log('上传失败', err);
          // 处理上传失败的情况
        }
      });
    }
    
  },
  
  onLoad(query) {
     this.formData.mid = query.id;
     console.log(this.formData.mid);
   }
};
</script>

<style lang="scss" scoped>
/* 这里可以添加必要的css，由于不需要css，所以留空 */
.container {
  background-color: #f5faf9;
  min-height: 100vh;
}

::v-deep .example-body {
  width: 400rpx;
}
.formList {
  .time {
    display: flex;
    justify-content: space-between;
    height: 120rpx;
    background-color: #fff;
    line-height: 120rpx;
    padding: 0 20rpx;
    margin: 20rpx 10rpx;
   ::v-deep .uni-date-x--border {
      border: 0;
    }
  }
  .useTime {
    display: flex;
    justify-content: space-between;
    height: 120rpx;
    background-color: #fff;
    line-height: 120rpx;
    margin: 20rpx 10rpx;
    padding: 0 20rpx;
    input {
      margin: auto 0;
    } 
  }
  .remark {
    height:220rpx;
    background-color: #fff;
    line-height: 120rpx;
    margin: 20rpx 10rpx;
     padding: 0 20rpx;
  }
  .picture {
    height:320rpx;
    background-color: #fff;
    padding: 0 20rpx;
    margin: 20rpx 10rpx;
    .uploader-item {
      margin: 100rpx 20rpx;
    }
    block {
      position: relative;
    }
    .img {
      position: relative;
      width: 250rpx;
      height: 250rpx;
    }
    .upload-img {
      width: 230rpx;
      height: 230rpx;
      overflow: hidden;
    }
    .delete-icon {
      width: 50rpx;
      position: absolute;
      top: 2%;
      right: 2%;
    }
  }
}
</style>